<template>
  <div style="min-height: 100vh; background: #f7f7f7">
    <van-dropdown-menu active-color="#37B5B5">
      <van-dropdown-item title="农产品种">
        <div style="display: flex; background: #eee">
          <van-sidebar
            style="height: auto"
            v-model="activeNyKey"
            @change="onChangeNy"
          >
            <van-sidebar-item
              v-for="(items, key) in regionnyList"
              :key="key"
              :title="items.label"
            />
          </van-sidebar>
          <div class="tabOptionsny">
            <p
              @click="secondaryPositionny(res, indexs)"
              v-if="regionListNy.length > 0"
              :class="[activenyStyle == indexs && nyTwoLock ? 'activeOne' : '']"
              v-for="(res, indexs) in regionListNy"
              :key="indexs"
            >
              {{ res.label }}
            </p>
          </div>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="所在地区" ref="item">
        <div style="display: flex; background: #eee">
          <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item
              v-for="(items, key) in regionList"
              :key="key"
              :title="items.label"
            />
          </van-sidebar>
          <div class="tabOptions">
            <p
              @click="secondaryPosition(res, indexs)"
              v-if="regionListTwo.length > 0"
              :class="[activeStyle == indexs && twoLock ? 'activeOne' : '']"
              v-for="(res, indexs) in regionListTwo"
              :key="indexs"
            >
              {{ res.label }}
            </p>
          </div>
          <div class="tabOptions">
            <p
              @click="levelChoice(res, indexs)"
              v-if="regionListThree.length > 0"
              v-for="(res, indexs) in regionListThree"
              :class="[activeThree == indexs && threeLock ? 'activeOne' : '']"
              :key="indexs"
            >
              {{ res.label }}
            </p>
          </div>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div style="padding-bottom: 12px">
      <div
        @click="toPage(item)"
        class="bindData"
        v-for="(item, index) in standardList.rows"
        :key="index"
      >
        <div>
          <div :class="[item.bandFlag == 1 ? '' :'activeColr']">
            <p class="first1">{{ item.bandFlag == 1 ? "已绑定" : "未绑定" }}</p>
          </div>
          <div>
            <span>{{ item.name }}</span>
            <p class="last1" v-if="item.defaultFlag == 1">默认</p>
          </div>
        </div>
        <div>
          <p>
            <img src="../../assets/img/dataNow.png" />
            <span>{{ item.createTime | dateFormat('YYYY-MM-DD') }}</span>
          </p>
          <p>
            <img src="../../assets/img/yonghu.png" />
            <span>{{ item.createdByName }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Dialog,
  Toast,
  DropdownMenu,
  DropdownItem,
  Sidebar,
  SidebarItem,
  Cell,
} from "vant";
// import dayjs from 'dayjs'
import { getValue, setValue } from "@/utils/auth";
import { getHandle } from "@/api";
export default {
  name: "AddPlanting",
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Toast.name]: Toast,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Cell.name]: Cell,
  },
  data() {
    return {
      value: 0,
      option: [],
      activeKey: 0,
      activeStyle: 0,
      twoLock: false,
      activeThree: 0,
      threeLock: false,
      standardList: [],
      regionList: [],
      regionListTwo: [],
      regionListThree: [],
      regionnyList: [],
      regionListNy: [],
      activenyStyle: 0,
      nyTwoLock: false,
      activeNyKey: 0,
      objGlobal: {
          // loginUserId:1,
          // tenantCode:1,
          // token:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJNUT09Iiwic3ViIjoie1wibW9iaWxlUGhvbmVcIjpcIjE3Mzg5MTg4NzYxXCIsXCJsb2dpbk5hbWVcIjpcInRlc3RcIixcIm5hbWVcIjpcIua1i-ivleenn-aIt-euoeeQhuWRmFwiLFwibG9naW5Vc2VySWRcIjpcIjFcIixcInVzZXJUeXBlXCI6XCJURU5UQU5UX0FETUlOXCJ9IiwiaXNzIjoiY2N5dCIsImlhdCI6MTYzNTczMjA2OCwiYXVkIjoiY2N5dCIsImV4cCI6MTYzODMyNDA2OCwibmJmIjoxNjM1NzMyMDY4fQ.K-ycYKCZxy6rGWGVViIOG2Dg9VxvA83kQErCbQOjKRw"
        // loginUserId: getValue('loginUserId'),
        // tenantCode:getValue('tenantCode'),
        // token: "",
      },
      getData: "",
    };
  },
  computed: {},
  created() {
    // this.$bridge.register("getData", (loginUserId, tenantCode, token) => {
    //   // 请加上自己的事件列表事件
    //   this.objGlobal.loginUserId = loginUserId;
    //   this.objGlobal.tenantCode = tenantCode;
    //   this.objGlobal.token = token;
    //   setValue("allToken", this.objGlobal.token);
    //   this.getStandardList();
    //   this.getRegionManage();
    //   this.agriculturalAroduct();

    // });

    // this.getStandardList();
    //   this.getRegionManage();
    //   this.agriculturalAroduct();
    this.$bridge.register("refresh", (data) => {
      // 请加上自己的事件列表事件
      this.getStandardList();
      this.getRegionManage();
      this.agriculturalAroduct();
    });
  },
  methods: {
    //农业产品相关方法
    //获取农产品种
    agriculturalAroduct() {
      getHandle(
        `/agri/api/common/businessData/queryList4Amis`,
        { pCode: "T000010_AGRIPRODUCTTYPE" }
      ).then((res) => {
        res.data.options.unshift({
          label: "全部",
          value: "",
        });
        this.regionnyList = res.data.options;
        this.onChangeNy();
      });
    },
    onChangeNy(index = 0) {
      // console.log(this.regionnyList[index].value,index,'哈哈哈哈哈')
      this.parentFarm = this.regionnyList[index].value;
      this.activeNyKey = index;
      this.activenyStyle = 0;
      this.nyTwoLock = false;
      let params = {
        typeCode: this.regionnyList[index].value,
      };
      getHandle(
        `/agri/api/common/agriProduct/queryList`,
        params
      ).then((res) => {
        this.regionListNy = res.data.options;
      });
      this.getStandardList();
    },
    //选项
    secondaryPositionny(res, indexs) {
      if (indexs !== this.activenyStyle || !this.nyTwoLock) {
        this.activenyStyle = indexs;
        this.nyTwoLock = true;
        this.subclassesFarm = res.value;
        // this.cityCode = res.value
      } else {
        this.nyTwoLock = false;
      }
      this.getStandardList();
    },
    //地区相关方法
    // nyTwoLock
    getStandardList() {
      let params = {
        agriProductId: this.nyTwoLock
          ? this.subclassesFarm
          : this.parentFarm,
        provinceCode: this.provinceCode,
        cityCode: this.twoLock ? this.cityCode : "",
        countyCode: this.threeLock ? this.countyCode : "",
      };
      getHandle(
        `/agri/api/zzbzh/standardBand/queryListPage`,
        params
      ).then((res) => {
        this.standardList = res.data;
      });
    },
    //市级选择
    secondaryPosition(res, indexs) {
      if (indexs !== this.activeStyle || !this.twoLock) {
        this.activeStyle = indexs;
        this.regionListThree = this.regionListTwo[indexs].children;
        // this.activeThree = -1
        this.twoLock = true;
        this.threeLock = false;
        this.cityCode = res.value;
      } else {
        this.twoLock = false;
        this.threeLock = false;
      }
      this.getStandardList();
    },

    //获取省市区数据
    getRegionManage() {
      getHandle(
        `/agri/api/common/regionManage/queryList`
      ).then((res) => {
        this.regionList = res.data.rows;
        console.log(this.regionList,777)
        let children = [];
        res.data.rows.forEach((item, index) => {
          children = children.concat(item.children);
        });
        this.regionList.unshift({
          children,
          label: "全国",
          value: "",
        });
        this.provinceCode = this.regionList[0].value;
        this.regionListTwo =
          !!this.regionList.length > 0 &&
          this.regionList[this.activeKey].children;
        this.regionListThree =
          !!this.regionListTwo.length > 0 &&
          this.regionListTwo[this.activeThree].children;
          console.log(this.regionList,888)
      });

    },
    //区级选择
    levelChoice(res, indexs) {
      if (!!this.twoLock) {
        if (indexs !== this.activeThree || !this.threeLock) {
          this.activeThree = indexs;
          this.regionListThree = this.regionListTwo[this.activeStyle].children;
          this.activeThree = indexs;
          this.threeLock = true;
          this.countyCode = res.value;
        } else {
          this.threeLock = false;
        }
      } else {
        this.$toast("请先选择市");
      }
      this.getStandardList();
    },
    onConfirm() {
      //   this.$refs.item.toggle();
    },
    //省级选择
    onChange(index) {
      //   console.log(index,'?',this.regionList[index].children)
      console.log(index);
      this.activeKey = index;
      this.provinceCode = this.regionList[index].value;
      this.activeStyle = 0;
      this.activeThree = 0;
      this.twoLock = false;
      this.threeLock = false;
      this.regionListTwo =
        !!this.regionList.length > 0 &&
        this.regionList[this.activeKey].children;
      this.regionListThree =
        !!this.regionListTwo.length > 0 &&
        this.regionListTwo[this.activeThree].children;
      this.getStandardList();
    },
    toPage(item) {
      setValue("id", item.id);
      this.$bridge.call("standardizedPreview");
    },
  },
};
</script>
<style lang="scss" scoped>
.activeOne {
  border: 1px solid #37B5B5;
  color: #37B5B5;
}
::v-deep .van-sidebar {
  height: 600px;
  padding-bottom: 10px;
}
.tabOptionsny {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  height: 100%;
  margin-left: 3%;
  // height: 600px;
  overflow-y: auto;
  margin-bottom: 10px;
  > P {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    // text-align: center;
    width: 46%;
    padding: 7px 0 7px 5px;
    background-color: #fff;
    border-radius: 3px;
    height: 32px;
    margin: 5px 0;
  }
}
.tabOptionsny::after {
  content: "";
  width: 42%;
}
.tabOptions {
  flex: 1;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-around;
  // align-items: flex-start;
  height: 100%;
  margin-left: 3%;
  height: 600px;
  overflow-y: auto;
  margin-bottom: 10px;
  > P {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    // text-align: center;
    width: 90%;
    padding: 7px 0 7px 5px;
    background-color: #fff;
    border-radius: 3px;
    height: 32px;
    margin: 5px 0;
  }
}
.tabOptions::after {
  content: "";
  width: 42%;
}
.bindData {
  background-color: #fff;
  margin-left: 5%;
  margin: 15px 5%;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 2px 2px 6px #eee;
  > div {
    &:first-child {
      // border-bottom: 1px dotted #666;
      >div{

        &:first-child{
          float: right;
          width: 60px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          background-color: rgba(55, 181, 181, 0.15);
          color: #37B5B5;
          margin-top: -15px;
          margin-right: -15px;
          border-radius: 0 12px 0 10px;
        }
        &:last-child{
          display: flex;
          align-items: center;
          >p{
            color: #37B5B5;
            background-color: rgba(55, 181, 181, 0.15);
            padding: 2px 8px;
          }
          >span{
            font-size: 16px;
            color: #333333;
            font-weight: 500;
            margin-right: 8px;
          }
        }
      }
    }
    &:last-child {
      display: flex;
      align-items: center;
      margin-top: 15px;
      justify-content: space-between;
      > p {
        width: 38%;
        color: #7f7f7f;
        display: flex;
        align-items: center;
        img{
          width: 18px;
          height: 18px;
          margin-right: 8px;
        }

        // &:first-child {
        //   height: 22px;
        //   line-height: 22px;
        //   padding-left: 3px;
        //   margin-left: 5px;
        // }
      }
    }
  }
}
 .activeColr{
    color: #3199FF!important;
    background-color: rgba(49, 153, 255, 0.15)!important;
}
::-webkit-scrollbar {
  width: 0px;
}

::-webkit-scrollbar-track {
  background-color: none;
}

::-webkit-scrollbar-thumb {
  background-color: none;
}

::-webkit-scrollbar-thumb:hover {
  background-color: none;
}

::-webkit-scrollbar-thumb:active {
  background-color: none;
}
::v-deep .van-sidebar-item--select::before{
   background-color: #37B5B5;
}
</style>
